<template>
    <AButton
        @click="
            operatedRecord = { ...descriptions, main_cate_list: descriptions.main_cate_list.map(item => item._id) };
            modalVisible = true;
        "
        type="primary"
        shape="round"
        class="editButton"
    >
        <template #icon>
            <EditOutlined />
        </template>
        修改
    </AButton>
    <a-descriptions title="商城设置" bordered>
        <a-descriptions-item :span="1" label="网站标题">{{ descriptions.site_title }}</a-descriptions-item>
        <a-descriptions-item :span="2" label="网站图标">
            <AImage :src="`${baseUrl}${descriptions.site_logo}`" :width="50" :height="50" />
        </a-descriptions-item>
        <a-descriptions-item :span="1" label="联系电话">{{ descriptions.site_tel }}</a-descriptions-item>
        <a-descriptions-item :span="2" label="商品默认图">
            <AImage :src="`${baseUrl}${descriptions.no_picture}`" :width="50" :height="50" />
        </a-descriptions-item>
        <a-descriptions-item :span="3" label="SEO关键词">{{ descriptions.site_keywords }}</a-descriptions-item>
        <a-descriptions-item :span="3" label="SEO网站描述">{{ descriptions.site_description }}</a-descriptions-item>
        <a-descriptions-item :span="3" label="搜索关键词">{{ descriptions.search_keywords }}</a-descriptions-item>
        <a-descriptions-item :span="3" label="首页主列表分类">{{ descriptions.main_cate_list?.map(item => item.title)?.join("、") }}</a-descriptions-item>
        <a-descriptions-item :span="3" label="备案信息">{{ descriptions.site_icp }}</a-descriptions-item>
        <a-descriptions-item :span="3" label="统计代码">{{ descriptions.tongji_code }}</a-descriptions-item>
        <a-descriptions-item :span="3" label="轰炸手机号">{{ descriptions.bombing_phone }}</a-descriptions-item>
    </a-descriptions>
    <AModal title="编辑" v-model:visible="modalVisible" @ok="confirmForm" :width="600">
        <ARow>
            <ACol span="21">
                <AForm @finish="confirmForm" ref="formRef" :model="descriptions" v-bind="{ labelCol: { span: 6 }, wrapperCol: { span: 18 } }">
                    <AFormItem name="site_title" label="网站标题">
                        <AInput v-model:value="operatedRecord.site_title" />
                    </AFormItem>
                    <AFormItem name="site_logo" label="网站图标">
                        <CustomUpload v-model:image="operatedRecord.site_logo" />
                    </AFormItem>
                    <AFormItem name="site_keywords" label="SEO关键词">
                        <ATextarea v-model:value="operatedRecord.site_keywords" />
                    </AFormItem>
                    <AFormItem name="site_description" label="SEO网站描述">
                        <ATextarea v-model:value="operatedRecord.site_description" />
                    </AFormItem>
                    <AFormItem name="no_picture" label="商品默认图">
                        <CustomUpload v-model:image="operatedRecord.no_picture" />
                    </AFormItem>
                    <AFormItem name="site_icp" label="备案信息">
                        <ATextarea v-model:value="operatedRecord.site_icp" />
                    </AFormItem>
                    <AFormItem name="site_tel" label="联系电话">
                        <AInputNumber style="width: 100%" v-model:value="operatedRecord.site_tel" />
                    </AFormItem>
                    <AFormItem name="search_keywords" label="搜索关键词">
                        <ATextarea v-model:value="operatedRecord.search_keywords" />
                    </AFormItem>
                    <AFormItem name="tongji_code" label="统计代码">
                        <ATextarea v-model:value="operatedRecord.tongji_code" />
                    </AFormItem>
                    <AFormItem name="main_cate_list" label="首页主列表分类">
                        <ASelect mode="multiple" allowClear v-model:value="operatedRecord.main_cate_list">
                            <ASelectOption v-for="(item, index) in cateList" :key="index" :value="item._id">{{ item.title }}</ASelectOption>
                        </ASelect>
                    </AFormItem>
                    <AFormItem name="site_tel" label="轰炸电话" :rules="[{ pattern: phoneReg, message: '手机号格式错误' }]">
                        <AInputNumber style="width: 100%" v-model:value="operatedRecord.bombing_phone" />
                    </AFormItem>
                </AForm>
            </ACol>
            <ACol span="3"> </ACol>
        </ARow>
    </AModal>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import EditOutlined from "@ant-design/icons-vue/EditOutlined";
import CustomUpload from "@/components/CustomUpload.vue";
import { getShopSettingApi, updateShopSettingApi } from "@/api/shop";
import { message } from "ant-design-vue";
import { getGoodsCateApi } from "@/api/goods";
import config from "@/config";
export default defineComponent({
    components: { EditOutlined, CustomUpload },
    setup() {
        const state = reactive({
            descriptions: {
                site_title: "",
                site_logo: "",
                site_keywords: "",
                site_description: "",
                no_picture: "",
                site_icp: "",
                site_tel: "",
                search_keywords: "",
                tongji_code: "",
                main_cate_list: [],
                bombing_phone: null,
            },
            modalVisible: false,
            formRef: ref(),
            operatedRecord: {},
            cateList: [],
        });
        const confirmForm = () => {
            state.formRef.validate().then(() => {
                updateShopSettingApi(state.operatedRecord).then(async res => {
                    if (res.code === 200) {
                        await getDescriptions();
                        message.success("编辑成功");
                        state.modalVisible = false;
                    }
                });
            });
        };
        const getDescriptions = () => {
            return getShopSettingApi().then(res => {
                if (res.code === 200 && res.data?.length) {
                    state.descriptions = res.data[0];
                }
            });
        };
        getDescriptions();
        const getCate = () => {
            getGoodsCateApi().then(res => {
                if (res.code === 200) {
                    state.cateList = res.data;
                }
            });
        };
        getCate();
        return {
            ...toRefs(state),
            confirmForm,
            baseUrl: process.env.VUE_APP_BASEURL,
            phoneReg: config.phoneReg,
        };
    },
});
</script>

<style scoped lang="scss">
.editButton {
    margin-bottom: 20px;
}
</style>
